<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
/**
 - 在组件中的data配置项必须是一个函数
 - 为什么要是一个函数呢?
   - 组件是可以被复用的
   - 那如果data是一个数据对象, 多个组件会共享一个数据对象, 组件之间会造成数据干扰
   - 如果是函数, 那么组件每被复用一次, 就会调用一次data函数, 得到一个新的独立的数据对象, 这样不同组件操作数据就不会相互干扰
 */
export default {
  data() {
    console.log("我被执行了");
    return {
      count: 200,
    };
  },
};
</script>

<style>
.base-count {
  margin: 20px;
}
</style>